<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Transform</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- styles -->
    <link rel="stylesheet" href="../../css/global.css"/>
    <link rel="stylesheet" href="css/google-code-prettify.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/transform.css"/>

    <!--[if lt IE 9]>
    <script src="../../lib/js/html5.js"></script>
    <![endif]-->

    <!-- icons -->
    <link rel="icon" href="../../lib/image/favicon.ico"/>
    <link rel="shortcut icon" href="../../lib/image/favicon.ico"/>

</head>
<body>
<nav class="navbar">
    <div class="inner">
        <ul class="nav">
            <li>
                <a href="./index.html">Home</a>
            </li>
            <li class="active">
                <a href="./transform.html">Transform</a>
            </li>
            <li>
                <a href="./transition.html">Transition</a>
            </li>
            <li>
                <a href="./animation.html">Animation</a>
            </li>
            <!--<li>-->
                <!--<a href="events.html">Events</a>-->
            <!--</li>-->
            <!--<li>-->
            <!--<a href="./script/">Script</a>-->
            <!--</li>-->
        </ul>
        <a class="brand" href="../../">Nicole_Site</a>
    </div>
</nav>
<header class="overview subov">
    <div class="inner">
        <h1>CSS3 Transform</h1>
        <p>实现了一些可用SVG实现的同样的功能，可用于内联(inline)元素和块级(block)元素，允许旋转、缩放和移动元素。</p>
    </div>
</header>
<div class="container">
    <div class="inner clearfix">
        <aside class="span2">
            <div class="aside">
                <ul class="aside-nav">
                    <li class="cur"><a href="#origin"><i class="icon-chevron-right"></i>transform-origin</a></li>
                    <li><a href="#rotate"><i class="icon-chevron-right"></i>rotate</a></li>
                    <li><a href="#scale"><i class="icon-chevron-right"></i>scale</a></li>
                    <li><a href="#skew"><i class="icon-chevron-right"></i>skew</a></li>
                    <li><a href="#translate"><i class="icon-chevron-right"></i>translate</a></li>
                    <li><a href="#matrix"><i class="icon-chevron-right"></i>matrix</a></li>

                </ul>
            </div>
        </aside>
        <article class="span3">
            <section id="origin">
                <header class="page-header">
                    <h1>transform-origin</h1>
                    <div class="explain">
                        <p>设置或检索对象以某个原点进行转换</p>
                        <p>该属性提供2个参数值</p>
                        <p>如果提供两个，第一个用于横坐标，第二个用于纵坐标</p>
                        <p>如果只提供一个，该值将用于横坐标；纵坐标将默认为50%</p>
                        <p>对应的脚本特性为transformOrigin</p>
                    </div>
                    <div class="syntax">
                        <p>transform-origin：[&lt;percentage&gt;|&lt;length&gt;left|right] [&lt;percentage&gt;|&lt;length&gt;top|bottom]</p>
                        <p>默认值：50% 50%，效果等同于center center</p>
                    </div>
                </header>
                <div class="alert yellow">通过设置不同的<code>transform-origin</code>值，观察对相同角度转向<code>rotate(45deg)</code>的影响。</div>
                <div class="example">
                    <div class="transf transf-origin">
                        <div class="node node-brown">Original</div>
                        <div class="node node-purple origin-1">20% 50%</div>
                        <div class="node node-blue origin-2">0% 100%</div>
                        <div class="node node-green origin-3">right top</div>
                        <div class="node node-yellow origin-4">left bottom</div>
                        <div class="node node-orange origin-5">100% 100%</div>
                        <div class="node node-red origin-6">70% 70%</div>
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
            -webkit-transform-origin: [percentage|length] [percentage|length];
               -moz-transform-origin: [percentage|length] [percentage|length];
                -ms-transform-origin: [percentage|length] [percentage|length];
                 -o-transform-origin: [percentage|length] [percentage|length];
                    transform-origin: [percentage|length] [percentage|length]; </pre>
            </section>
            <section id="rotate">
                <header class="page-header">
                    <h1>rotate</h1>
                    <div class="explain">
                        <p>指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义</p>
                    </div>
                    <div class="syntax"><p>rotate(&lt;angle&gt;)</p></div>
                </header>
                <div class="alert yellow">基于<code>transform-origin</code>的默认值，观察设置不同角度转向<code>rotate(&lt;angle&gt;)</code>的效果。</div>
                <div class="example">
                    <div class="transf transf-rotate">
                        <div class="node node-brown">Original</div>
                        <div class="node node-purple rotate-1"><span>rotate</span><span>(30deg)</span></div>
                        <div class="node node-blue rotate-2"><span>rotate</span><span>(-30deg)</span></div>
                        <div class="node node-green rotate-3"><span>rotate</span><span>(90deg)</span></div>
                        <div class="node node-yellow rotate-4"><span>rotate</span><span>(120deg)</span></div>
                        <div class="node node-orange rotate-5"><span>rotate</span><span>(-120deg)</span></div>
                        <div class="node node-red rotate-6"><span>rotate</span><span>(180deg)</span></div>
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
                -webkit-transform: rotate(angle);
                   -moz-transform: rotate(angle);
                    -ms-transform: rotate(angle);
                     -o-transform: rotate(angle);
                        transform: rotate(angle);</pre>
            </section>
            <section id="scale">
                <header class="page-header">
                    <h1>scale</h1>
                    <div class="explain">
                        <p>指定对象的2D scale（2D缩放）</p>
                        <p>第一个参数对应X轴，第二个参数对应Y轴</p>
                        <p>如果第二个参数未提供，则默认取第一个参数的值</p>
                        <p>缩小：0到1直接的小数；放大：大于1的数字</p>
                        <p>若数值为负，则翻转并按数值的绝对值相应缩放</p>
                    </div>
                    <div class="syntax"><p>scale(&lt;number&gt;[, &lt;number&gt;]); scaleX(&lt;number&gt;), scaleY(&lt;number&gt;)</p></div>
                </header>
                <div class="alert yellow"></div>
                <div class="example">
                    <div class="transf transf-scale">
                        <div class="node node-brown">Original</div>
                        <div class="node node-purple scale-1"><span>scale</span><span>(.5,.8)</span></div>
                        <div class="node node-blue scale-2"><span>scale</span><span>(1.5,2)</span></div>
                        <div class="node node-green scale-3"><span>scaleX</span><span>(2)</span></div>
                        <div class="node node-yellow scale-4"><span>scaleY</span><span>(.8)</span></div>
                        <div class="node node-orange scale-5"><span>scale</span><span>(-.8,1.2)</span></div>
                        <div class="node node-red scale-6"><span>scale</span><span>(1.5,-1.5)</span></div>
                    </div>
                </div>
                <pre class="prettyprint linenums sign">
                -webkit-transform: scale(x,y);
                   -moz-transform: scale(x,y);
                    -ms-transform: scale(x,y);
                     -o-transform: scale(x,y);
                        transform: scale(x,y);</pre>
            </section>
            <section id="skew">
            <header class="page-header">
                <h1>skew</h1>
                <div class="explain">
                    <p>指定对象skew transformation（斜切扭曲）</p>
                    <P>第一个参数对应X轴，第二个参数对应Y轴</P>
                    <p>如果第二个参数未提供，则默认值为0</p>
                </div>
                <div class="syntax"><p>skew(&lt;angle&gt;[, &lt;angle&gt;]); skewX(&lt;angle&gt;), skewY(&lt;angle&gt;)</p></div>
            </header>
            <div class="alert yellow"></div>
            <div class="example">
                <div class="transf transf-skew">
                    <div class="node node-brown">Original</div>
                    <div class="node node-purple skew-1"><span>skew</span><span>(10deg,30deg)</span></div>
                    <div class="node node-blue skew-2"><span>skew</span><span>(30deg,10deg)</span></div>
                    <div class="node node-green skew-3"><span>skewX</span><span>(45deg)</span></div>
                    <div class="node node-yellow skew-4"><span>skewY</span><span>(-45deg)</span></div>
                    <div class="node node-orange skew-5"><span>skew</span><span>(-30deg,10deg)</span></div>
                    <div class="node node-red skew-6"><span>skew</span><span>(30deg,-10deg)</span></div>
                </div>
            </div>
                <pre class="prettyprint linenums sign">
                -webkit-transform: skew(angle,angle);
                   -moz-transform: skew(angle,angle);
                    -ms-transform: skew(angle,angle);
                     -o-transform: skew(angle,angle);
                        transform: skew(angle,angle);</pre>
        </section>
        <section id="translate">
            <header class="page-header">
                <h1>translate</h1>
                <div class="explain">
                    <p>指定对象的2D translation（2D平移）</p>
                    <p>第一个参数对应X轴，第二个参数对应Y轴</p>
                    <p>如果第二个参数未提供，则默认值为0</p>
                </div>
                <div class="syntax"><p>translate(&lt;length&gt;[, &lt;length&gt;]); translateX(&lt;length&gt;), translateY(&lt;length&gt;)</p></div>
            </header>
            <div class="alert yellow"></div>
            <div class="example">
                <div class="transf transf-translate">
                    <div class="node node-brown">Original</div>
                    <div class="node node-purple translate-1"><span>translate</span><span>(10px,30px)</span></div>
                    <div class="node node-blue translate-2"><span>translate</span><span>(30px,10px)</span></div>
                    <div class="node node-green translate-3"><span>translateX</span><span>(45px)</span></div>
                    <div class="node node-yellow translate-4"><span>translateY</span><span>(-45px)</span></div>
                    <div class="node node-orange translate-5"><span>translate</span><span>(-30px,10px)</span></div>
                    <div class="node node-red translate-6"><span>translate</span><span>(30px,-10px)</span></div>
                </div>
            </div>
            <pre class="prettyprint linenums sign">
            -webkit-transform: translate(x,y);
               -moz-transform: translate(x,y);
                -ms-transform: translate(x,y);
                 -o-transform: translate(x,y);
                    transform: translate(x,y);</pre>
        </section>
            <section id="matrix">
                <header class="page-header">
                    <h1>matrix</h1>
                    <div class="explain">
                        <p>以一个含六值的(a,b,c,d,tx,ty)变换矩阵的形式指定一个2D变换.</p>
                        <p>a, c, b, d是一个二维矩阵。</p>
                        <p>tx, ty就是就是基于X和Y 坐标重新定位元素。</p>
                    </div>
                    <div class="syntax"><p>matrix(&lt;number&gt;,&lt;number&gt;,&lt;number&gt;,&lt;number&gt;,&lt;number&gt;,&lt;number&gt;)</p></div>
                </header>
                <div class="alert yellow">具体数值请参照矩阵数学原理。</div>
                <!--<div class="example">-->
                    <!--<div class="transf transf-translate">-->
                        <!--<div class="node node-brown">Original</div>-->
                        <!--<div class="node node-purple translate-1"><span>translate</span><span>(10px,30px)</span></div>-->
                        <!--&lt;!&ndash;<div class="node node-blue translate-2"><span>translate</span><span>(30px,10px)</span></div>&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="node node-green translate-3"><span>translateX</span><span>(45px)</span></div>&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="node node-yellow translate-4"><span>translateY</span><span>(-45px)</span></div>&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="node node-orange translate-5"><span>translate</span><span>(-30px,10px)</span></div>&ndash;&gt;-->
                        <!--<div class="node node-red matrix"><span>matrix</span><span>(1, 0, 0, 1, 30, 30)</span></div>-->
                    <!--</div>-->
                <!--</div>-->
            <pre class="prettyprint linenums sign">
            -webkit-transform: matrix(a,b,c,d,tx,ty);
               -moz-transform: matrix(a,b,c,d,tx,ty);
                -ms-transform: matrix(a,b,c,d,tx,ty);
                 -o-transform: matrix(a,b,c,d,tx,ty);
                    transform: matrix(a,b,c,d,tx,ty);</pre>
            </section>
        </article>
    </div>
</div>
<footer class="footer">
    <div class="inner">Copyright © myspace-nicolesite.rhcloud.com All Rights Reserved.
        <a href="http://weibo.com/magicdemo">@Ning_Wong</a>
    </div>
</footer>

<!-- javascript -->
<script src="../../lib/js/jquery-1.9.0.min.js"></script>
<script src="js/affix.js"></script>
<script src="js/google-code-prettify.js"></script>
<script type="text/javascript">
    (function($){
        window.prettyPrint && prettyPrint();
    })(window.jQuery)
</script>

</body>
</html>